<template>
  <div class="container" v-if="pageAuth">
    <!-- 头部 -->
    <page-header
      :title="$t('m.Set_rental_term')"
      :has-return="true"
    ></page-header>

    <div class="create_div">
      <div class="create_form_title1" style="font-size:18px;">
        {{ $t('m.Set_pre_authorization_amount_title') }}
      </div>
      <div class="create_form_title2" style="color: #646b80;">
        {{ $t('m.Set_pre_authorization_amount_title_hint1') }}
      </div>
      <el-form class="el_form" ref="ruleForm" :model="ruleForm" :rules="rules">
        <div class="create_form_title1">
          {{ $t('m.Pre_authorization_amount') }}
          <el-tooltip
            class="item"
            effect="dark"
            :content="$t('m.Set_pre_authorization_amount_title_hint2')"
            placement="top-start"
          >
            <img
              src="@/assets/imgs/ic_mark@2x.png"
              alt=""
              class="hitImg"
              style="margin-left:8px;"
            />
          </el-tooltip>
        </div>
        <el-form-item
          prop="preAuthSetting.amount"
          :class="{
            disabled_color: userType != 1 || !btnAuth
          }"
        >
          <div id="box" class="currency">{{ $currency.symbol }}</div>
          <el-input
            v-model="ruleForm.preAuthSetting.amount"
            @input="changePreauth"
            clearable
            style="width:280px;"
            :style="widthStyle"
            :placeholder="'10.00'"
            class="currency_input"
            maxlength="10"
          ></el-input>
        </el-form-item>
        <div class="create_form_usage">
          <div class="create_form_title1" style="margin-bottom:0;">
            {{ $t('m.Total_cap_limit') }}
          </div>
        </div>
        <div class="create_form_title2">
          <div>{{ $t('m.Plan_step') }} 1/2: {{ $t('m.Total_cap_limit') }}</div>
          <el-tooltip
            class="item"
            effect="dark"
            :content="$t('m.Maximum_payment_amount')"
            placement="top-start"
          >
            <img src="@/assets/imgs/ic_mark@2x.png" alt="" class="hitImg" />
          </el-tooltip>
        </div>
        <el-form-item
          prop="penaltySetting.penaltyAmount"
          :class="{
            disabled_color: userType != 1 || !btnAuth
          }"
        >
          <div class="currency">{{ $currency.symbol }}</div>
          <el-input
            v-model.number="ruleForm.penaltySetting.penaltyAmount"
            maxlength="7"
            @input="changeDayAmount"
            clearable
            style="width:280px;margin-right:20px;height:36px;"
            :style="widthStyle"
            class="currency_input"
            :placeholder="'40.00'"
          ></el-input>
        </el-form-item>
        <div class="create_form_title2">
          <div>
            {{ $t('m.Plan_step') }} 2/2: {{ $t('m.Rental_duration_limit') }}
          </div>
          <el-tooltip
            class="item"
            effect="dark"
            :content="$t('m.Maximum_lease_duration')"
            placement="top-start"
          >
            <img src="@/assets/imgs/ic_mark@2x.png" alt="" class="hitImg" />
          </el-tooltip>
        </div>
        <div
          style="display:flex;"
          :class="{
            disabled_color: userType != 1 || !btnAuth
          }"
        >
          <el-form-item prop="penaltySetting.maxRentDuration">
            <el-input
              v-model.number="ruleForm.penaltySetting.maxRentDuration"
              maxlength="3"
              @input="changeMaxRentDuration"
              clearable
              style="width:280px;margin-right:20px;height:36px;"
              :placeholder="'72'"
            ></el-input>
          </el-form-item>
          <div class="select_radio">
            <div
              class="select_radio_div"
              v-for="item in selectList"
              :key="item.maxDurationControlType"
              :class="{
                select_radio_active:
                  ruleForm.penaltySetting.maxDurationControlType ==
                  item.maxDurationControlType
              }"
              @click="changeRadio(item)"
            >
              <div
                class="select_radio_div_text"
                :class="{
                  select_radio_div_text_active:
                    ruleForm.penaltySetting.maxDurationControlType ==
                    item.maxDurationControlType
                }"
              >
                {{ item.label }}
              </div>
              <img
                :src="
                  ruleForm.penaltySetting.maxDurationControlType ==
                  item.maxDurationControlType
                    ? require('@/assets/imgs/work/ic_selected.svg')
                    : require('@/assets/imgs/work/ic_unselected@2x.png')
                "
                alt=""
                width="14px"
                height="14px"
              />
            </div>
          </div>
        </div>
      </el-form>
    </div>

    <div class="create_button" v-if="userType == 1 && btnAuth">
      <el-button
        class="el_button"
        type="primary"
        @click="saveBtn()"
        :disabled="disabled"
        >{{ $t('m.save') }}</el-button
      >
    </div>
  </div>
</template>

<script>
export default {
  data () {  
    const validateMaxValue = (rule, value, callback) => {
      const maxValue = this.ruleForm.penaltySetting.penaltyAmount
      if (Number(value) < Number(maxValue)) {
        callback(new Error(`${this.$t('m.Cannot_less_total_amount')}${maxValue}`))
      } else {
        callback()
      }
    }    
    return {
      ruleForm: {
        rentalSetting: {
          applePay: {
            onOff: false
          },
          card: {
            onOff: true
          },
          googlePay: {
            onOff: false
          },
          riskFund: {
            onOff: false,
            type: 'deposit'
          }
        }, //租借条件设置
        penaltySetting: {
          penaltyAmount: '', // 封顶金额
          maxRentDuration: '', // 免费时长
          maxDurationControlType: 2 // 	免费时长类型：2-小时 3-天
        }, //最大租借设置
        depositSetting: {
          amount: '', // 	金额
          autoRefund: false
        }, //押金设置
        preAuthSetting: {
          amount: '', // 	金额
          autoRefund: false
        }, //预授权设置        
        prepaymentSetting: {
          amount: '', // 	金额
          autoRefund: false
        } //预付款设置
      },
      rules: {
        'depositSetting.amount': [
          {
            required: true,
            message: this.$t('m.This_field_required'),
            trigger: 'blur'
          }
        ],  
        'preAuthSetting.amount': [
          {
            required: true,
            message: this.$t('m.Pre_authorization_amount_limit'),
            trigger: 'blur'
          },
          {
            validator: validateMaxValue,
            trigger: 'blur'
          }
        ],        
        'penaltySetting.penaltyAmount': [
          {
            required: true,
            message: this.$t('m.This_field_required'),
            trigger: 'blur'
          }
        ],
        'penaltySetting.maxRentDuration': [
          {
            required: true,
            message: this.$t('m.This_field_required'),
            trigger: 'blur'
          }
        ]
      },

      selectList: [
        // { maxDurationControlType: 1, label: this.$t('m.minute')},
        { maxDurationControlType: 2, label: this.$t('m.hour') },
        { maxDurationControlType: 3, label: this.$t('m.day2') }
      ],

      disabled: true,

      currencyWidth: '',
      pageAuth: this.permissionsId(121),
      btnAuth: this.permissionsId(143),
      userType: this.getUserType() //用户类型
    }
  },
  computed: {
    widthStyle () {
      return {
        '--currencyWidth': this.currencyWidth
      }
    }
  },
  created () {
    if (!this.pageAuth) {
      return
    }
    this.getRentalSettings()
  },
  mounted () {
    this.getWidth()
  },
  methods: {
    //获取货币宽度
    getWidth () {
      this.$nextTick(() => {
        let box = document.getElementById('box')
        this.currencyWidth = box.clientWidth + 14 + 'px'
      })
    },
    // 获取租借条件设置
    getRentalSettings () {
      this.$api.setting.getRentalSetting().then(res => {
        if (this.$ok(res)) {
          this.ruleForm = res.data
          this.disabled = true
        }
      })
    },
    changeAmount (val) {
      this.ruleForm.depositSetting.amount = this.$check.amount(val)
      this.disabled = false
    },
    changePreauth (val) {
      this.ruleForm.preAuthSetting.amount = this.$check.amount(val)
      this.disabled = false
    },    
    changeDayAmount (val) {
      this.ruleForm.penaltySetting.penaltyAmount = this.$check.amount(val)
      this.disabled = false
    },
    changeMaxRentDuration (val) {
      this.ruleForm.penaltySetting.maxRentDuration = this.$check.noZero(val)
      this.disabled = false
    },
    changeRadio (items) {
      this.ruleForm.penaltySetting.maxDurationControlType =
        items.maxDurationControlType
      this.disabled = false
    },
    saveBtn () {
      this.$refs['ruleForm'].validate(valid => {
        if (valid) {
          this.$api.setting.setRentalSetting(this.ruleForm).then(res => {
            if (this.$ok(res)) {
              this.getRentalSettings()
              this.$api.setting.getConfigs()
              this.disabled = true
              this.$message.success(res.message)
            } else {
              this.$message.error(res.message)
            }
          })
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
@import 'src/style/common';

.container {
  width: 100%;
  min-width: 1000px !important;
  .page-header {
    padding: 20px 0;
  }
  .page-header,
  .create_div {
    width: 100%;
    min-width: 1000px !important;
    max-width: 1000px !important;
  }

  .disabled_color {
    pointer-events: none !important;
  }

  .create_div {
    background: #ffffff;
    border-radius: 10px;
    padding: 24px 52px;

    .create_form_title1 {
      font-size: 16px;
      font-weight: 600;
      text-align: left;
      color: #39404d;
      line-height: 22px;
      margin-bottom: 12px;
      margin-right: 8px;
      display: flex;
      align-items: center;
    }

    .create_form_title2 {
      display: flex;
      margin-bottom: 12px;
      div {
        font-size: 14px;
        font-weight: 500;
        text-align: left;
        color: #646b80;
        line-height: 16px;
        margin-right: 8px;
      }
    }

    .el_form {
      ::v-deep .el-form-item {
        margin-bottom: 20px;
        line-height: 36px;
        display: flex;
        align-items: center;
      }

      ::v-deep .el-form-item__content {
        line-height: 36px;
      }

      ::v-deep .el-input__icon {
        height: 36px;
        line-height: 36px !important;
        font-size: 12px;
      }
      ::v-deep .el-input__inner {
        height: 36px !important;
        border-radius: 4px;
        line-height: 36px;
        font-size: 14px;
        // border: 1px solid #e4e4e6;
        font-weight: 500;
        text-align: left;
        // color: #39404d;
      }
      ::v-deep .el-input__suffix-inner {
        display: flex;
      }

      ::v-deep .el-input__icon {
        line-height: 36px;
        height: 36px;
      }

      .create_form_usage {
        display: flex;
        margin-bottom: 8px;
        position: relative;
        .usageImg {
          width: 16px;
          height: 16px;
          position: absolute;
          left: -28px;
          top: 2px;
        }
      }
      .select_radio {
        display: flex;
        flex-wrap: wrap;
        .select_radio_div {
          padding: 10px 16px;
          background: #ffffff;
          border: 1px solid #d2d8e2;
          border-radius: 5px;
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: space-between;
          box-sizing: border-box;
          margin-right: 16px;
          margin-bottom: 20px;
          height: 36px;
          .select_radio_div_text {
            font-size: 14px;
            font-weight: 500;
            text-align: left;
            color: #39404d;
            line-height: 16px;
            margin-right: 10px;
          }
          .select_radio_div_text_active {
            color: var(--text-color) !important;
          }
        }
        .select_radio_active {
          border: 2px solid var(--text-color);
          padding: 9px 15px;
        }
        .select_radio_disable {
          background: #f5f7fa;
          cursor: not-allowed;
        }
      }
    }
  }
}

.hitImg {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.create_button {
  margin-top: 20px;
  display: flex;
  justify-content: end;
  width: 100%;
  min-width: 1000px;
  max-width: 1000px;
  z-index: 20;
  position: relative;
  .el_button {
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    color: #ffffff;
    line-height: 16px;
    border: none;
    padding: 10px 48px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.currency {
  position: absolute;
  z-index: 6;
  left: 10px;
  color: #39404d;
  font-size: 14px;
  font-weight: 500;
}
.currency_input {
  ::v-deep .el-input__inner {
    padding-left: var(--currencyWidth) !important;
  }
}

@media screen and (min-width: 1221px) {
  .container {
    display: flex;
    justify-content: center;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
  }
}
</style>
